<!DOCTYPE html>

<style>
    .p-collapsing-sidebar > .nav-link {
        width: 55px;
        padding: 0;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .nav-item-now {
        background: linear-gradient(36deg, #24C9F6, #2af270);
        color: rgba(1, 0, 31, 0.9);
    }

    .nav-item-now .p-collapsing-title,
    .nav-item-now i {
        color: rgba(1, 0, 31, 0.9);
    }

    .now a {
        border-right: rgb(12, 196, 76) 3px solid !important;
    }


    #search {
        margin-right: 25px;
    }

    #search input {
        width: 20rem;
    }

    #add {
        border-radius: 2px;
    }

    td:nth-child(6) {
        text-align: center;
    }
</style>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组织管理</title>
    <!-- CSS -->
    <link href="assets/css/fonts/fontawesome/all.min.css" rel="stylesheet">
    <link href="assets/css/fonts/beid.css" rel="stylesheet">

    <link href="assets/css/main.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">

    <!--城市选择器css-->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- JQVMAP -->
    <link href="assets/plugins/jqvmap/jqvmap.min.css" rel="stylesheet">

    <!-- dateRangePicker -->
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
    <link rel="icon" href="assets/img/favicon.png">

    <!-- Fonts -->
    <link href="assets/fonts/inter/inter.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="body">

<!-- header -->
<header class="main-header">
    <!-- nav -->
    <nav class="main-navbar navbar navbar-expand-lg navbar-light shadow-2">
        <div class="lnav-box d-flex">
            <div class="logo-wrapper px-3 d-none d-md-flex">
                <img src="assets/img/logo.png" alt="Logo">
            </div>
            <div class="sidebar-toggler-wrapper ml-auto">
                <button class="p-collapsing-sidebar-toggler sidebar-toggler-secondary transition rounded-circle"
                        data-collapsing="partially" data-collapsing-target="#adminNav" type="button">
                    <span class="icon-menu-options"></span>
                </button>
            </div>
        </div>
        <div class="d-none d-lg-block ml-0 mr-auto pl-4">

        </div>
        <div class="pr-6">
            <ul class="nav sec-nav navbar-nav flex-row">

                <li class="user-item nav-item dropdown">
                    <a class="user-link nav-link d-inline-flex align-items-center h-100 small-1 pl-1 pl-sm-3 pr-0"
                       href="#" id="dropdownAdmin_02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle Avatar-rounded-circle" src="./assets/img/user.png" alt="" style="position: absolute;top: 4px;left: -35px;border: none;width: 38px;height: 38px;border: 2px solid;">
                        <div class="d-none d-sm-block lh-1">
                            <div class="lh-5">张三</div>
                            <span class="small-3"><i class="fas fa-circle text-warning small-5"></i> 在线</span>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow-1 py-3 position-absolute mt-2"
                         aria-labelledby="dropdownAdmin">

                        <a class="dropdown-item" href="#"><span class="icon-power-on-buton mr-2"></span>退出</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.nav -->
</header>
<!-- /.header -->

<!-- main -->
<main>
    <!-- sidebar -->
    <nav id="adminNav" class="main-sidebar p-collapsing-sidebar sidebar-fixed sidebar-left d-flex flex-column">
        <div class="main-sidebar-inner" data-scrollbar="sidebar">
            <ul class="sidebar-nav sidebar-nav-light-hover list-unstyled text-unset small-3 fw-600 content-list">
                <li class="nav-item text-light transition">
                    <a href="atlas.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-desktop"></i> <span class="p-collapsing-title">知识图谱</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="warning.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-exclamation-circle"></i> <span class="p-collapsing-title">智能预警</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="message-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-chart-bar"></i> <span class="p-collapsing-title">预警消息管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="document-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-file-contract"></i> <span class="p-collapsing-title">预案管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="corpus-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="icon-menu-grid"></i> <span class="p-collapsing-title">语料库管理</span>
                    </a>
                </li>

                <li class="nav-item active text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-sticky-note"></i> <span class="p-collapsing-title">组织架构管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-management.html" class="p-collapsing-title nav-link">
                                    <span>用户管理</span>
                                </a>
                            </li>

                            <li class="nav-item now">
                                <a href="organization-management.html" class="p-collapsing-title nav-link">
                                    <span>组织管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="nav-item text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-clone"></i> <span class="p-collapsing-title">日志管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-log.html" class="p-collapsing-title nav-link">
                                    <span>用户登录记录</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="operation-log.html" class="p-collapsing-title nav-link">
                                    <span>操作记录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.sidebar -->

    <!-- main content -->
    <div class="main-container">
        <div class="overflow-hidden">
            <div id="Email" class="!page-content-fl">
                <div class="d-flex align-items-center px-6 py-5">
                    <div class="text-light mr-auto">
                        <h2 class="fw-100 mb-0">组织管理</h2>
                        <span class="lead-1 text-info">Organization management</span>
                    </div>

                    <div style="margin-right: 30px;">
                        <form action="#">
                            <!--                                <label for="addr-show" style="display: inline-block;">-->
                            <!--                                    <input type="text" value="" id="addr-show" style="display: inline-block;">-->
                            <!--                                </label>-->

                            <!--省份选择-->
                            <select id="prov" onchange="showCity(this)">
                                <option value="">浙江省</option>
                            </select>

                            <!--城市选择-->
                            <select id="city" onchange="showCountry(this)">
                                <option value="">杭州市</option>
                            </select>

                            <!--县区选择-->
                            <select id="country" onchange="selecCountry(this),showAddr()">
                                <option value="">建德市</option>
                            </select>
                            <!-- <button type="button" class="btn met1" onClick="showAddr()">确定</button> -->
                        </form>
                    </div>

                    <div class="mt-5" id="search">
                        <div class="form-group input-group">
                            <input type="text" class="form-control" placeholder="请输入要查找的组织名">
                            <div class="input-group-append ml-3">
                                <button class="btn btn-theme" type="button">查找</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <!--form-->
                    <div class="panel">
                        <div class="collapse show" id="collapseRecentOrders">
                            <div class="panel-body pr-0">
                                <div class="pr-4">
                                    <div class="panel-list-sc list-unstyled" data-scrollbar="scroll"
                                         style="height: 60vh">
                                        <div class="pr-5">
                                            <table class="table table-borderless mb-0">
                                                <thead>
                                                <tr>
                                                    <th scope="col" class="pt-0" style="width: 6vw">序号</th>
                                                    <th scope="col" class="pt-0" style="width: 10vw">组织名</th>
                                                    <th scope="col" class="pt-0" style="width: 16vw">地址</th>
                                                    <th scope="col" class="pt-0" style="width: 8vw">联系电话</th>
                                                    <th scope="col" class="pt-0" style="width: 8vw">所属人员</th>
                                                    <th scope="col" class="pt-0" style="width: 4vw">操作</th>
                                                    <th scope="col" class="pt-0 text-center" style="width: 2rem;">
                                                        <!--添加按钮-->
                                                        <button href="#"
                                                                class="btn btn-sm btn-outline-warning btn-round px-4"
                                                                id="add" title="添加">添加
                                                        </button>
                                                        <!--点击添加弹窗-->
                                                        <div id="popup" class="panel-col col-xl-6">
                                                            <div class="panel">
                                                                <!--×－-->
                                                                <header class="panel-header align-items-center">
                                                                    <div>
                                                                        <h3 class="title mb-0">组织添加</h3>
                                                                    </div>
                                                                    <div class="panel-header-nav ml-auto">
                                                                        <a class="nav-item">
                                                                            <span class="icon-close"></span>
                                                                        </a>
                                                                    </div>
                                                                </header>

                                                                <!--组件-->
                                                                <div class="position-relative my-2">
                                                                    <form class="input-transparent">
                                                                        <div class="mt-5">
                                                                            <div class="input-group">
                                                                                <div
                                                                                        class="input-group-prepend">
                                                                                            <span
                                                                                                    class="input-group-text"><i
                                                                                                    class="fas fa-user"></i></span>
                                                                                </div>
                                                                                <input type="text"
                                                                                       class="form-control"
                                                                                       id="controlFormControlInput6"
                                                                                       placeholder="组织名">
                                                                            </div>
                                                                        </div>


                                                                        <div class="mt-5">
                                                                            <div class="input-group">
                                                                                <div
                                                                                        class="input-group-prepend">
                                                                                            <span
                                                                                                    class="input-group-text"><svg
                                                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                                                    height="1em"
                                                                                                    viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                                                                                    <path
                                                                                                            d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"
                                                                                                            fill="#2af270"/>
                                                                                                </svg>
                                                                                                </li></span>
                                                                                </div>
                                                                                <input type="text"
                                                                                       class="form-control"
                                                                                       placeholder="联系电话">
                                                                            </div>
                                                                        </div>

                                                                        <div class="mt-5">
                                                                            <div class="form-group">
                                                                                <textarea class="form-control" rows="3" placeholder="组织地址"></textarea>
                                                                            </div>
                                                                        </div>

                                                                        <div class="btn-section pl-4 pl-md-6">
                                                                            <a href="#"
                                                                               class="my-3 mx-1 btn btn-outline-theme">确定</a>
                                                                            <a href="#"
                                                                               class="my-3 mx-1 btn btn-outline-danger">取消</a>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>市府办</td>
                                                    <td>建德市新安江街道新安路1号</td>
                                                    <td>1234566543</td>
                                                    <td>2</td>
                                                    <td style="vertical-align: middle;">
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit5"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>

                                                            <!--点击编辑弹窗-->
                                                            <div id="edit-popup" class="panel-col col-xl-6">
                                                                <div class="panel">
                                                                    <!--×－-->
                                                                    <header class="panel-header align-items-center">
                                                                        <div>
                                                                            <h3 class="title mb-0">修改部门信息</h3>
                                                                        </div>
                                                                        <div class="panel-header-nav ml-auto">
                                                                            <a class="nav-item">
                                                                                <span class="icon-close"></span>
                                                                            </a>
                                                                        </div>
                                                                    </header>

                                                                    <!--组件-->
                                                                    <div class="position-relative my-2">
                                                                        <form class="input-transparent">

                                                                            <div class="mt-5">
                                                                                <div class="input-group">
                                                                                    <div
                                                                                            class="input-group-prepend">
                                                                                            <span
                                                                                                    class="input-group-text"><svg
                                                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                                                    height="1em"
                                                                                                    viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                                                                                    <path
                                                                                                            d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"
                                                                                                            fill="#2af270"/>
                                                                                                </svg>
                                                                                                </li></span>
                                                                                    </div>
                                                                                    <input type="text"
                                                                                           class="form-control"
                                                                                           placeholder="联系电话">
                                                                                </div>
                                                                            </div>

                                                                            <div class="mt-5">
                                                                                <div class="form-group">
                                                                                    <textarea class="form-control" rows="3" placeholder="组织地址"></textarea>
                                                                                </div>
                                                                            </div>


                                                                            <div class="btn-section pl-4 pl-md-6 d-flex justify-content-center">
                                                                                <a href="#"
                                                                                   class="my-3 mx-1 btn btn-outline-theme">确定</a>
                                                                                <a href="#"
                                                                                   class="my-3 mx-1 btn btn-outline-danger">取消</a>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>市人武部</td>
                                                    <td>建德市新安江街道新安路188号</td>
                                                    <td>654233543</td>
                                                    <td>1</td>

                                                    <td>
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit2"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>


                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>市委宣传部</td>
                                                    <td>建德市新安江街道新安路1号</td>
                                                    <td>3456432</td>

                                                    <td>4</td>
                                                    <td>
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>


                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">4</th>
                                                    <td>市融媒体中心</td>
                                                    <td>建德市新安东路268号</td>
                                                    <td>53245324</td>

                                                    <td>0</td>

                                                    <td>
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit1"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>


                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">5</th>
                                                    <td>市发改局</td>
                                                    <td>建德市新安江街道望江路22号</td>
                                                    <td>14234321418</td>
                                                    <td>2</td>

                                                    <td>
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit3"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">6</th>
                                                    <td>市经信局</td>
                                                    <td>新安江街道望江路22号</td>
                                                    <td>132134418</td>
                                                    <td>1</td>

                                                    <td>
                                                        <div
                                                                style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit7"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">7</th>
                                                    <td>市公安局</td>
                                                    <td>建德市法院路2号</td>
                                                    <td>3243218</td>
                                                    <td>0</td>

                                                    <td>
                                                        <div style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit8"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">8</th>
                                                    <td>市规划和自然资源局</td>
                                                    <td>建德市新安东路20号</td>
                                                    <td>87632342418</td>
                                                    <td>2</td>

                                                    <td>
                                                        <div style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit9"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">9</th>
                                                    <td>市自然资源局</td>
                                                    <td>建德市新安东路20号</td>
                                                    <td>87632342418</td>
                                                    <td>4</td>

                                                    <td>
                                                        <div style="display: flex; align-items: center; height: 2vh">
                                                            <a href="#"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-danger">删除</a>
                                                            <a href="#" id="edit19"
                                                               class="my-3 mx-1 btn btn-sm btn-outline-light">编辑</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <footer id="footer" class="footer">
            <div class="container-fluid">
                <div class="row gutters-y align-items-center">
                    <div class="col-md-6 col-lg-5">

                    </div>
                    <div class="col-md-6 col-lg-7 order-lg-last d-none d-md-block">
                        <div class="nav nav-bold-style justify-content-end text-uppercase px-2">
                            <a class="nav-link" href="#">用户须知</a>
                            <a class="nav-link" href="#">使用指南</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- /.footer -->
    </div>
</main>
<!-- /.main -->

<!-- offcanvas - search -->
<div id="offcanvas-search" class="offcanvas h-100 py-8" data-animation="fadeDown" data-scrollbar="offcanvas">
    <div class="row">
        <div class="col-sm-1 order-sm-last">
            <button type="button" data-toggle="offcanvas-close"
                    class="close float-right mr-lg-6 text-light o-1 lead-2 fw-100" data-dismiss="offcanvas"
                    aria-label="Close">
                <span aria-hidden="true" class="icon-close"></span>
            </button>
        </div>
        <form class="col-sm-11 col-lg-10 mx-auto input-rounded form-inline position-relative w-100 mt-0">
            <div class="input-group bg-none border-0 w-100">
                <input class="form-control form-control-lg rounded-0 bg-none pl-0 h-auto fs-6 display-md-4 display-xl-2 fw-600"
                       type="text" aria-label="Search" placeholder="Search for...">
            </div>
            <hr class="w-100 o-25 border-white mt-0">
            <div class="row gutters-y w-100">
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Categories
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Architecture</strong> (800)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Art & Illustration</strong> (317)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Culture & Education</strong> (672)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>E-Commerce</strong> (272)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Tags</h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>360</strong> (128)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>3D</strong> (42)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Animation</strong> (4105)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Technologies
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>AngularJS</strong> (629)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Apache</strong> (241)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Bootstrap</strong> (751)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>CloudFire</strong> (209)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>CloudFire</strong> (107)</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Countries
                    </h5>
                    <ul class="list-unstyled pl-4">
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>United States</strong> (1605)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>France</strong> (569)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>
                        </li>
                        <li class="mb-4">
                            <a href="#" class="tag-item"><strong>United Kingdom</strong> (672)</a>
                        </li>
                        <li class="mb-0">
                            <a href="#" class="tag-item"><strong>Italy</strong> (484)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- /.offcanvas - search -->

<!-- preloader -->
<div class="preloaderWrapper"></div>

<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>

<!--添加按钮弹窗-->
<script>
    $(document).ready(function () {
        // 加载界面时弹窗先不显示
        $("#popup").hide();

        $("#add").click(function () {
            $("#popup").fadeToggle();
        });

        $("#popup .nav-item, #popup .btn-outline-danger").click(function () {
            $("#popup").fadeOut();
        });
    });
</script>


<!--编辑按钮弹窗-->
<script>
    $(document).ready(function () {
        // 加载界面时弹窗先不显示
        $("#edit-popup").hide();

        $("#edit").click(function () {
            $("#edit-popup").fadeToggle();
        });

        $("#edit-popup .nav-item, #edit-popup .btn-outline-danger").click(function () {
            $("#edit-popup").fadeOut();
        });
    });
</script>


<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>

<!-- Chart.js -->
<script src="assets/plugins/chart/Chart.min.js" id="_chartJS_min"></script>
<script src="assets/plugins/chart/Chart.bundle.min.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-annotation.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-labels.js"></script>

<!-- apexcharts -->
<script src="assets/plugins/apexcharts/apexcharts.min.js"></script>

<!-- RangeSlider -->
<script src="assets/plugins/rangeslider/rangeslider.min.js" id="_rangeJS_min"></script>

<!-- Moment -->
<script src="assets/plugins/lib/moment/moment.min.js"></script>

<!-- JQVMAP -->
<script src="assets/plugins/jqvmap/jquery.vmap.min.js" id="_JQVMAP"></script>
<script src="assets/plugins/jqvmap/maps/jquery.vmap.world.js"></script>

<!-- dateRangePicker -->
<script src="assets/plugins/daterangepicker/daterangepicker.js" id="_DateRangeJS_min"></script>

<!-- User JS -->
<script src="assets/js/scripts.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js" id="_mainJS" data-plugins="load"></script>

<!-- Modules -->
<script src="assets/js/modules.js"></script>

<!-- 城市选择器 -->
<script src="assets/js/city.js"></script>
<script src="assets/js/method02.js"></script>

</body>
</html>


<style>
    #popup {
        width: 32%;
        position: fixed;
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%);
        z-index: 99;
        background-color: #091121;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    #edit-popup {
        width: 32%;
        position: fixed;
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%);
        z-index: 99;
        background-color: #091121;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

     .Avatar-rounded-circle {
         border-radius: 50% !important;
         height: 40px;
         width: 40px;
         text-align: center;
         border-style: solid;
         line-height: 35px;
     }



</style>
